<template>
  <div class="myContailer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{this.title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="add" v-if="isShow(175)">新 增</el-button>       
      </el-col>
    </el-row>
     <el-row class="myMarginTop_10px" :gutter="10">  
     	
      <el-col :span="4">
        <el-select v-model="PARENTID"
          >
          <el-option
            v-for="item in Object.keys(seek1)"
                    :key="item"
                    :label="seek1[item]"
                    :value="item">
          </el-option>
        </el-select>
      </el-col>
      
      <el-col :span="4">
        <el-select v-model="DELETED"
          >
          <el-option
            v-for="item in Object.keys(cancel_o)"
                    :key="item"
                    :label="cancel_o[item]"
                    :value="item">
          </el-option>
        </el-select>
      </el-col>
      
       <el-col :span="7">
        <el-input placeholder="请输入关键词" v-model="kw"></el-input>
      </el-col>
      
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="fuzzySearch">查 询</el-button>
      </el-col>
      
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            prop="STORE_ID"
            width="55">
          </el-table-column>
         
          <el-table-column
            prop="PARENTNAME"
            label="上一级名称"
            >         
          </el-table-column>
          
           <el-table-column
            prop="CATEGORYNAME"
            label="分类名称"
            >
           </el-table-column> 
          
          <el-table-column
            prop="LOGOIMG"
            label="分类图片"
            >
            <template scope="scope">
                <img :src='EBIZ_SHOW_PIC_API+scope.row.LOGOIMG' width="50" height="50"/>
                
            </template>
          </el-table-column>
          
           <el-table-column
            prop="CATEGORYGRADE"
            label="分类等级"
            >
          </el-table-column>
          
          <el-table-column
            prop="ORDERIDX"
            label="排序（倒叙）"
            >
          </el-table-column>
          
          <el-table-column
            prop="DELETED"
            label="删除标记"
            >
             <template scope="scope">
              <span v-if="scope.row.DELETED==0">未删除</span>
              <span v-else class="myColorRed">已删除</span>
            </template>
          </el-table-column>
          
          
          <el-table-column
            label="操作"
            width="200">
            <template scope="scope">              
              <span v-if="scope.row.PARENTID!=null">
                <el-button type="text primary" @click="modify(scope.row.CATEGORY_ID)" class="modifly" size="small" v-if="isShow(176)">编辑</el-button>
                <span v-if="scope.row.DELETED==0">
                  | <el-button type="text warning" @click="deleteData(scope.row.CATEGORY_ID)" class="look" size="small" v-if="isShow(177)">删除</el-button> 
                </span>
              </span>
              <span v-else>无权限</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>    
  </div>
</template>

<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .red{
  	color:#fff;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myColorRed{
    color: #f00;
  }
</style>

<script>
	import { EBIZ_SHOW_PIC_API } from '@/config/baseUrl';
  import { getClassifyList,seek1,cancel_o,deletethis } from '@/api/classify';
  import qs from "querystring";
  
  import { extractAreaIds } from '@/utils/misc';
  import { getRegion } from '@/utils/localstorage';

  export default {
    data(){
      return{  
        title:"团购分类管理",    
        list:[],  

        total:null, //总条数  
        page_num: 1, //当前页码
        page_size: 10, //每页显示多少条 
            
        lookObj:{},
      
        id:null,
        index:null,
        idArr:[],
        area_id: -1,
        pages:1000,
        loading:false,
        multipleSelection: [],        
        
        EBIZ_SHOW_PIC_API:EBIZ_SHOW_PIC_API,
        kw:"",
        cancel_o:cancel_o,
        DELETED:"",
        
        seek1:seek1,
        PARENTID: '',
   
        deleteDialog:false,
        
      }
    },
    created() {
      document.title=this.title;
      this.fetchList();
    },

    filters: {
      JUMPTYPEType: function(value) {     
        let src = '';
        switch (value) {
          case 2:
            src = 'url';
          break;
          case 10:
            src = '超市商品详情';
          break;
          case 11:
            src = '餐饮商品详情';
          break;
          case 12:
            src = '团购商品详情';
          break;
          case 20:
            src = '超市商品分类列表';
          break;
          case 21:
            src = '餐饮商品分类列表';
          break;
          case 22:
            src = '团购商品分类列表';
          break;         
        }
        return src;    
      }
  },

    methods:{
       fetchList() {
        let vm = this;
        
        const params = {
          page: vm.page_num,
          rows: vm.page_size,
          CATEGORYTYPE: 3,
          CATEGORYNAME:encodeURI(vm.kw),
          DELETED:this.DELETED,
          PARENTID:this.PARENTID
        }

        vm.loading = true;
        getClassifyList(params)
        .then(response => {
          let res = response.data;
          vm.list = res.rows;
          vm.total = res.total;       
          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        });
      },
      
      fuzzySearch() {
         this.fetchList();
      },
      
      handleSizeChange(val) {
        this.page_size = val;
        this.fetchList();
      },
      
      handleCurrentChange(val) {
        this.page_num = val;
        this.fetchList();
      },

      add:function(){
        this.$router.push({
          path:'/purchaseClassifyComonents',
          query: {type: 'add'}
        })
      },
      
      modify:function(ADID){
        this.$router.push({
          path:'/purchaseClassifyComonents',
          query: {type: 'update', id: ADID}
        })
      },
           
    deleteData(id){//删除
        let vm=this;
        vm.$confirm('您确定要删除这条数据吗？', '提示', {//弹出框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params={
            CATEGORY_ID:id
          }
          deletethis(qs.stringify(params)).then(response => {//请求删除接口
            vm.$message({
              type: 'success',
              message: response.data.MSG
            });
            vm.fetchList();
          }).catch(error => {
            vm.$message.error("执行失败！");
          });
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },

     //----页码---
      handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArr.push(val[i].area_id)
          }
        }else{
          this.idArr = [];
        }           
      },
      
       indexMethod(index) {
          return (this.page_num-1)*this.page_size + index + 1
      }
    }

  }


</script>



